
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
</head>
<body>
    
    <script>
        // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

        // 数组的解构赋值
        // 对象的解构赋值
        // 字符串的解构赋值
        // 函数参数的解构赋值

        // 总而言之：实现可遍历Iterator的接口  都能解构赋值 =》  两类对象   类似数组的对象 可遍历的对象


        // 数组的解构赋值

        let  [a,b,c,d] = [1,2,3,4]
        console.log(a,b,c,d);

         //  ...args rest参数：接受多余的参数转换为数组   rest参数与...扩展运算符互为逆运算  ...将数组转换为一列值

        let [x,y,...args] = [1,2,3,4,5,6,7,8,9,10]
        console.log(x,y);
        console.log(args);

        let arr = [1,2,3,4,5,6,7,8]
        console.log(...arr);
        console.log([...arr]);

        //  1+2+3+...+10  arguments对象--》rest参数
        function add(x,y,...args) {
            let sum = 0;
            for (let i = 0; i < [...args].length; i++) {
                sum+= [...args][i]
            }
            return sum+x+y;
        }

        console.log(add(1,2,3,4,5,6,7,8,9,10));



         // 对象的解构赋值  顺序不需要一致
         let {foo,bar} = {bar:"nba",foo:"cba"}
         console.log(foo,bar);


          // 字符串的解构赋值
          {
            let [a,b,c,d,e] = "hello"
            console.log(a,b,c,d,e);
            
         }

          // 函数参数的解构赋值

          function fn([a,b]){
            return a+b
          }

          console.log(fn([10,20]));
        

          // 实现可遍历Iterator的接口  都能解构赋值   两类对象->   类似数组的对象 可遍历的对象

        // 等号右边不是可遍历结构，那将会报错
        // let [num] = 1;   //number
        // let [num] = true;   //boolean
        // let [num] = null;   //null
        // let [num] = undefined;   //undefined
        // let [num] = NaN;   //number

        // console.log(num)

    </script>
</body>
</html>